import React from 'react';
import {connect} from 'dva';
import VoteList from '../components/VoteList';
import MainLayout from '../components/layouts/MainLayout';
import {Row, Col} from 'antd';
import {routerRedux} from 'dva/router';

const Votes = ({dispatch, votes}) => {
  function handleDelete(id) {
    dispatch({
      type: 'user/delete',
      payload: id,
    });
  }

  function clickDetail(id) {
    dispatch(routerRedux.push({
      pathname: '/vote',
      query: {
        id: id
      }
    }));
  }

  function clickModify(id) {
    dispatch(routerRedux.push({
      pathname: '/votemodify',
      query: {
        id: id
      }
    }));
  }

  function handleAddVote() {
    dispatch(routerRedux.push({
      pathname: '/voteadd',
      query: {}
    }));
  }

  function handlePageChange(page, pageSize) {
    dispatch({
      type: 'votes/startLoading',
      payload: {}
    });

    dispatch({
      type: 'votes/fetch',
      payload: {
        page: page,
        page_size: pageSize
      }
    });
  }

  const location = {
    pathname: '/users'
  };

  return (
    <MainLayout location={location}>
      <Row>
        <Col span={3}>

        </Col>
        <Col span={18}>
          <VoteList votes={votes} onClickDetail={clickDetail} onClickModify={clickModify} handleAddVote={handleAddVote}
                    handlePageChange={handlePageChange}/>
        </Col>
        <Col span={3}>

        </Col>
      </Row>

    </MainLayout>
  );
};

export default connect(({votes}) => ({
  votes,
}))(Votes);
